<template>
    <div>
        <!--查询表单-->
        <div>
            <el-form :inline="true" :model="searchFormData">
                <el-form-item label="通道">
                    <el-select v-model="searchFormData.channelCode" placeholder="请选择" size="mini">
                        <el-option v-for="item in channels" :label="item.label"
                                   :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="流量池">
                    <el-select v-model="searchFormData.poolCode" placeholder="请选择" size="mini">
                        <el-option v-for="item in pools" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="套餐">
                    <el-select v-model="searchFormData.comboCode" placeholder="请选择" size="mini">
                        <el-option v-for="item in combos" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="周期">
                    <el-select v-model="searchFormData.period" placeholder="请选择" size="mini">
                        <el-option v-for="item in period" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchFormData.status" placeholder="请选择" size="mini">
                        <el-option v-for="item in status" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主动停机状态">
                    <el-select v-model="searchFormData.closeStatus" placeholder="请选择" size="mini">
                        <el-option v-for="item in closeStatus" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户">
                    <el-select v-model="searchFormData.cardCustomerId" placeholder="请选择" size="mini">
                        <el-option v-for="item in cardCustomerIds" :label="item.label"
                                   :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="id">
                    <el-input v-model="searchFormData.beginId" placeholder="起始id" style="width:100px" size="mini"/>
                    -
                    <el-input v-model="searchFormData.endId" placeholder="结束id" style="width:100px" size="mini"/>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="searchFormData.inputTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="mini">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchSubmit" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <br>
        <!--表格-->
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" height="500px" max-height="500px"
                  type="expand"
                  @selection-change="handleSelectionChange" id="cardList_input">
            <el-table-column type="selection"/>
            <el-table-column label="id" prop="id" align="center">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column prop="iccid" label="卡号" align="center"/>
            <el-table-column prop="channelName" label="通道" align="center"/>
            <el-table-column prop="poolName" label="流量池" align="center"/>
            <el-table-column prop="comboName" label="套餐" align="center"/>
            <el-table-column prop="used" label="已使用流量" align="center"/>
            <el-table-column prop="left" label="剩余流量" align="center"/>
            <el-table-column prop="total" label="累计使用流量" s align="center"/>
            <el-table-column prop="customerName" label="客户" align="center"/>
            <el-table-column prop="period" label="生命期" align="center"/>
            <el-table-column prop="status" label="卡状态" align="center"/>
            <el-table-column prop="closeStatus" label="是否主动停机" align="center"/>
            <el-table-column prop="enterTime" label="入库时间" align="center"/>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="detail(scope.row.iccid)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div>
            <pageHelper :current-page="page" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange" class="my_pagenation"/>
        </div>
        <!--详情-->
        <el-dialog title="卡板详情" :visible.sync="detailDialogVisible" width="800px" @close="detailDialogCloseCall">
            <template>
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="日期">
                        <span>{{ cardDetail.comboDate }}</span>
                    </el-form-item>
                    <el-form-item label="套餐">
                        <span>{{ cardDetail.combName }}</span>
                    </el-form-item>
                    <el-form-item label="已使用">
                        <span>{{ cardDetail.used }}</span>
                    </el-form-item>
                    <el-form-item label="剩余">
                        <span>{{ cardDetail.left }}</span>
                    </el-form-item>
                    <el-form-item label="总流量">
                        <span>{{ cardDetail.total }}</span>
                    </el-form-item>
                </el-form>
                <el-button @click="detailDialogVisible=false" style="position: relative;left: 680px">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios';
    import pageHelper from '../common/pageHelper'
    import {getTimeByTimeArray} from '@/module/tools'

    export default {
        name: "cardList_input",
        components: {pageHelper},
        props: ['saleStatus'],
        data() {
            return {
                page: 1,
                size: 10,
                total: 0,
                detailDialogVisible: false,
                cardDetail: {
                    comboDate: '2018-11-11 10:23:00',
                    combName: 'test',
                    used: '1G',
                    left: '10G',
                    total: '100G'
                },
                searchFormData: {
                    channelCode: '',
                    poolCode: '',
                    comboCode: '',
                    period: '',
                    status: '',
                    closeStatus: '',
                    cardCustomerId: '',
                    beginId: '',
                    endId: '',
                    beginTime: '',
                    endTime: '',
                    inputTime: null,

                },
                channels: [{label: "通道1", value: 1},
                    {label: "通道2", value: 2},
                    {label: "通道3", value: 3}],
                pools: [{label: "流量池1", value: 1},
                    {label: "流量池1", value: 2},
                    {label: "流量池1", value: 3}],
                combos:
                    [{label: "套餐1", value: 1},
                        {label: "套餐2", value: 2},
                        {label: "套餐3", value: 3}],
                period: [{label: "生命期", value: 1}, {label: "测试期", value: 2}, {label: "沉默期", value: 3}, {
                    label: "正式期",
                    value: 4
                }, {label: "其他", value: 5}],
                status:
                    [{label: "待激活", value: 1},
                        {label: "正常", value: 2},
                        {label: "停机", value: 3}, {label: "销户", value: 3}],
                closeStatus:
                    [{label: "主动停机", value: 1},
                        {label: "未主动停机", value: 0},
                    ],
                cardCustomerIds:
                    [{label: "客户1", value: 1},
                        {label: "客户2", value: 2},
                    ],
                //如果tableData为空数组，勾选会出现异常(数组只能一次给定)
                tableData: [{iccid: 1}],
                multipleSelection: [],
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleSelectionChange(val) {
                console.log("选项改变触发");
                console.log(val);
                this.multipleSelection = val;
            },
            searchSubmit() {
                console.log("查询提交...");
                console.log(this.searchFormData);
                this.getData(this.page, this.size);
            },
            activeSubmit() {
                console.log("激活提交,打印多选参数");
                console.log(this.multipleSelection);
            },
            handleSizeChange(size) {
                this.size = size;
                this.getData(this.page, this.size);
            },
            handleCurrentChange(page) {
                this.page = page;
                this.getData(this.page, this.size);
            },
            detail(cardId) {
                console.log('卡板详情id', cardId);
                axios({
                    method: 'get',
                    url: API_PATH + '/cardFlow/getByIccid',
                    dataType: 'json',
                    params: {
                        iccid: cardId
                    }
                }).then(res => {
                    if (res.data.code == 0) {
                        this.cardDetail = this.data;
                    }
                })
                this.detailDialogVisible = true;
            },
            /*翻页跳转处理，传入页数*/
            getData: function (page, size) {
                console.log(`page= ${page}`, `size=${size}`);
                this.page = page || 1;
                this.size = size || 10;
                this.searchFormData.beginTime = getTimeByTimeArray(this.searchFormData.inputTime, 0);
                this.searchFormData.endTime = getTimeByTimeArray(this.searchFormData.inputTime, 1);
                let loading = this.$loading(this.options);
                axios({
                    method: 'get',
                    url: API_PATH + '/card/query',
                    dataType: 'json',
                    params: {
                        channelCode: this.searchFormData.channelCode,
                        poolCode: this.searchFormData.poolCode,
                        comboCode: this.searchFormData.comboCode,
                        period: this.searchFormData.period,
                        status: this.searchFormData.status,
                        closeStatus: this.searchFormData.closeStatus,
                        cardCustomerId: this.searchFormData.cardCustomerId,
                        beginId: this.searchFormData.beginId,
                        endId: this.searchFormData.endId,
                        beginTime: this.searchFormData.beginTime,
                        endTime: this.searchFormData.endTime,
                        page: this.page,
                        size: this.size,
                        saleStatus: parseInt(this.saleStatus)
                    }
                }).then(
                    res => {
                        if (res.data.code == 0) {
                            console.log('请求成功res', res);
                            this.tableData = res.data.data.list;
                            this.total = res.data.data.total;
                        }
                    },
                    xhr => {
                        console.log('请求失败');
                        this.$nextTick(() => {
                            console.log('关闭loading');
                            loading.close();
                        })
                    }
                )
                this.$nextTick(() => {
                    console.log('关闭loading');
                    loading.close();
                })
            },
            //详情对话框关闭回调
            detailDialogCloseCall() {
                this.cardDetail = {};
            }
        },
        mounted() {
            this.options = {
                text: '加载中...',
                background: 'rgba(0,0,0,0,1)',
                target: document.getElementById("cardList_input")
            }
            // this.getData();
        }
    }
</script>

<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
